<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习</title>
<script type="text/javascript">
	function fn1(){
	   var i1 = document.getElementById("i1");   //获取i1文本框中内容并赋值给变量i1;
	   var i2 = document.getElementById("i2");
	   var d1 = document.getElementById("d1");
	   d1.innerText = parseFloat(i1.value)+parseFloat(i2.value);
	}
	function fn2(){
		var i1 = document.getElementById("i1");
		var i2 = document.getElementById("i2");
		var d1 = document.getElementById("d1");
		d1.innerText = parseFloat(i1.value)-parseFloat(i2.value);
	}
	function fn3(){
		
		var q1 = document.getElementById("i1");
		var q2 = document.getElementById("i2");
		var d1 = document.getElementById("d1");
		d1.innerText = parseFloat(q1.value)*parseFloat(q2.value);
	}
	function fn4(){
		var i1 = document.getElementById("i1");
		var i2 = document.getElementById("i2");
		var d1 = document.getElementById("d1");
		d1.innerText = parseFloat(i1.value)/parseFloat(i2.value);
	}
	
	
	function fn5(X){
		var i1 = document.getElementById("i1");
		var i2 = document.getElementById("i2");
		var d1 = document.getElementById("d1");
		var n1 = parseFloat(i1.value);
		var n2 = parseFloat(i2.value);
		switch(X){
		case 1:
			d1.innerText = n1+n2;
			break;
		case 2:
			d1.innerText = n1-n2;
			break;
		case 3:
			d1.innerText = n1*n2;
			break;
		case 4:
			d1.innerText = n1/n2;
			break;	
		
		}
	}
</script>
</head>
<body>
<h1 align="center"  style="color:pink">简易计算器</h1>
<hr>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="+" onclick="fn5(1)">
<input type="button" value="-" onclick="fn5(2)">
<input type="button" value="*" onclick="fn5(3)">
<input type="button" value="/" onclick="fn5(4)">
<div id = "d1"></div>
</body>
</html>